<template>
    <div class="login_bg">
        <el-container>
            <el-header height="300px">
                <div id="title"><b>基 于 SSM+vue 的 校 园 快 递 管 理 系 统</b></div>
            </el-header>
            <!-- <div class="img_style1"></div> -->
            <div class="img_style2"></div>
            <!-- <div class="img_style3"></div> -->
            <div class="img_style4"></div>
            <el-main>
                <div class="loginAndRegister">
                    <el-tabs type="border-card" @tab-click="handleClick" :stretch="true">
                        <el-tab-pane label="登录">
                            <login></login>
                        </el-tab-pane>
                        <el-tab-pane label="注册">
                            <register></register>
                        </el-tab-pane>
                    </el-tabs>
                </div>
            </el-main>
        </el-container>
    </div>
</template>

<script>
import Login from './Login';
import Register from './Register';
export default {
    name: 'LoginAndRegister',
    components: { Register, Login },
    data() {
        return {
            activeIndex: '1'
        };
    },
    methods: {
        /*
      // 标签页点击处理
      handleClick(tab, event) {
        console.log(tab, event);
      }
       */
    }
};
</script>

<style scoped>
#title {
    font: 50px Extra large;
    font-family: '微软雅黑';
    line-height: 1.7;
    text-align: center;
    color: coral;
    margin-top: 3%;
}
.loginAndRegister {
    width: 450px;
    position: absolute;
    left: 35%;
    top: 30%;
    background:rgba(34,34,34,0.5);
}
.img_style1 {
    position: absolute;
    top: 600px;
    left: 200px;
    height: 150px;
    width: 250px;
    /* background-image: url(../../../assets/img/index_logo_5.jpg); */
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
}
.img_style2 {
    position: absolute;
    top: 300px;
    right: 50px;
    height: 200px;
    width: 250px;
    /* background-image: url(../../../assets/img/index_logo_2.jpg); */
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
}
.img_style3 {
    position: absolute;
    top: 200px;
    height: 150px;
    width: 250px;
    /* background-image: url(../../../assets/img/index_logo_3.jpg); */
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
}
.img_style4 {
    position: absolute;
    height: 150px;
    width: 250px;
    /* background-image: url(../../../assets/img/index_logo_4.jpg); */
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
}
.login_bg{
     height: 100%;
    width: 100%;
     background-image: url(../../../assets/img/login_bg.jpeg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
}
</style>
